<template>
  <div>
    <Head>我要登记</Head>
    <div >
      <div class="photo_uploader">
        <van-uploader :after-read="logoAfterRead">
          <img v-if="logo_src" :src="logo_src" alt="" class="logo">
        </van-uploader>
        <p class="uploader_text">点击上传</p>
      </div>
      <div>
        <van-field v-model="registerParams.name" required label="名称" placeholder="请填写" />
        <van-field v-model="registerParams.telephone" label="电话" placeholder="请填写" />
        <van-field v-model="registerParams.mobile" required label="手机" placeholder="请填写" />
        <van-field v-model="registerParams.weixin" label="微信" placeholder="请填写" />
        <div class="van-cell code_box">
          <div class="lable">
            二维码
          </div>
          <van-uploader class="code" :after-read="codeAfterRead">
            <img v-if="code_src" :src="code_src" alt="" class="code_img">
            <span v-else class="code_text">请上传二维码</span>
          </van-uploader>
        </div>
        <van-field v-model="type_cn" required @click="sortShow = true" label="分类"  placeholder="请填写" clickable readonly class="classif"  right-icon="arrow"></van-field>
        <van-popup v-model="sortShow"  position="bottom"  :style="{ height: '40%' }" round>
          <van-picker @confirm="onConfirm" @cancel="sortShow = false" :show-toolbar='true' :columns="typeListText" confirm-button-text cancel-button-text></van-picker>
        </van-popup>
        <div class="van-cell" >
          <div class="lable2">
            地址
          </div>
          <input type="text"  v-model="address_detail" class="text" placeholder="详细地址" />
          <div class="tag" @click="showMap = true">标注<van-icon name="aim" /></div>
        </div>
      </div>
      <div class="btn" >
        <van-button type="info" round @click="addregister">提交</van-button>
      </div>
    </div>
    <van-popup v-model="showMap" position="top" :lazy-render="true" :overlay="true" style="width:100%;height:100%" >
      <Mapset
        ref="mapset"
        title="地图标注"
        :mapLat="registerParams.lat"
        :mapLng="registerParams.lon"
        @closeMap="handlerCloseMap">
      </Mapset>
    </van-popup>

    <van-popup  :lazy-render="false" v-model="showResetMobile" position="right" :overlay="false" style="width:100%;height:100%">
      <Head @gobackCustomMethod="showResetMobile = false" :goback_custom="true">手机验证</Head>
      <div>
        <div class="notice_bar">
          为保证信息真实性，需要完成手机验证
        </div>
        <van-field v-model="authCodeParams.mobile" placeholder="请输入手机号" />
        <van-field v-model="authCodeParams.verify" placeholder="请输入验证码" >
          <template #button>
            <van-button class="sendCode" :disabled="sendDisabled" type="default" @click="sendCode" :color="$store.state.sendSmsBtnTextColor" plain>{{ $store.state.sendSmsBtnText }}</van-button>
          </template>
        </van-field>
        <div class="send_btn">
          <van-button @click="testingSend" size="large" type="info" round>提交</van-button>
        </div>
        <Captcha ref="captcha"></Captcha>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Mapset from '@/components/Mapset'
import ResetMobile from '@/components/account/ResetMobile'
import Captcha from '@/components/captcha/index'
import http from '@/utils/http'
import api from '@/api'
export default{
  components: {
    Mapset,
    ResetMobile,
    Captcha
  },
  data () {
    return {
      sortShow: false,
      showMap: false,
      showResetMobile: false,
      mobile: '44444',
      logo_src: '', // 企业logo图片路径
      code_src: '', // 二维码图片路径
      typeListText: [], // 分类文字数组
      typeList: null, // 筛选当选中分类的id数组
      type_cn: null, // 分类文字
      address_detail: '', // 地址详情
      codeText: '获取验证码', // 发送验证码文字
      isSendCode: true, // 是否发送验证码
      time: 60, // 倒计时
      regularMobile: /^13[0-9]{9}$|14[0-9]{9}$|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}$|16[0-9]{9}$|19[0-9]{9}$/, // 手机验证
      sendDisabled: false,
      registerParams: { // 保存资料参数
        name: '',
        lat: 0,
        lon: 0,
        type_id: '',
        mobile: '',
        telephone: '',
        weixin: '',
        qrcode: '',
        logo: '',
        address_detail: ''
      },
      authCodeParams: { // 手机验证参数
        phone_book_id: '',
        mobile: '',
        verify: ''
      }
    }
  },
  created () {
    this.getTypeList()
  },
  methods: {
    // 头像上传
    logoAfterRead (file) {
      let fileRaw = file.file
      let filetypeArr = (fileRaw.type || '').split('/')
      let filetype = filetypeArr[1]
      let tyepArr = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      if (tyepArr.indexOf(filetype) == -1) {
        this.$notify('文件类型不支持')
        return false
      }
      if (fileRaw.size > this.$store.state.config.fileupload_size * 1024) {
        let size = this.$store.state.config.fileupload_size / 1024
        size = size.toFixed(1)
        this.$notify('文件大小超出限制，最大' + size + 'mb')
        return false
      }
      http
        .postFormData(api.uploadFile, { file: file.file })
        .then(res => {
          this.registerParams.logo = res.data.file_id
          this.logo_src = res.data.file_url
        })
        .catch(() => {
        })
    },
    // 二维码上传
    codeAfterRead (file) {
      let fileRaw = file.file
      let filetypeArr = (fileRaw.type || '').split('/')
      let filetype = filetypeArr[1]
      let tyepArr = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      if (tyepArr.indexOf(filetype) == -1) {
        this.$notify('文件类型不支持')
        return false
      }
      if (fileRaw.size > this.$store.state.config.fileupload_size * 1024) {
        let size = this.$store.state.config.fileupload_size / 1024
        size = size.toFixed(1)
        this.$notify('文件大小超出限制，最大' + size + 'mb')
        return false
      }
      http
        .postFormData(api.uploadFile, { file: file.file })
        .then(res => {
          this.registerParams.qrcode = res.data.file_id
          this.code_src = res.data.file_url
        })
        .catch(() => {
        })
    },
    // 获取分类
    getTypeList () {
      http.get(api.phone_book_type).then((res) => {
        res.data.map((res) => {
          this.typeListText.push(res.title)
        })
        this.typeList = res.data
      })
    },
    // 分类弹窗
    onConfirm (value) {
      let current = this.typeList.filter((res) => {
        return res.title === value
      })[0]
      this.registerParams.type_id = current.id
      this.type_cn = value
      this.sortShow = false
    },
    // 保存登记信息
    addregister () {
      if (!this.registerParams.name) {
        this.$notify('请输入名称')
        return false
      }
      if (!this.registerParams.mobile) {
        this.$notify('请输入手机号')
        return false
      }
      if (!this.regularMobile.test(this.registerParams.mobile)) {
        this.$notify('手机号格式不正确')
        return false
      }
      if (!this.registerParams.type_id) {
        this.$notify('请选择分类')
        return false
      }
      http.post(api.phone_book_addsave, this.registerParams).then(res => {
        this.authCodeParams.phone_book_id = res.data.id
      })
      this.showResetMobile = true
    },
    // 地图
    handlerCloseMap (value) {
      this.showMap = false
      if (value === undefined) {
        return false
      }
      this.registerParams.lat = value.lat
      this.registerParams.lon = value.lng
      this.address_detail = value.address
      this.registerParams.address_detail = value.address
    },
    // 发送验证码
    sendCode () {
      if (this.authCodeParams.mobile == '') {
        this.$notify('请输入手机号')
        return false
      }
      if (!this.regularMobile.test(this.authCodeParams.mobile)) {
        this.$notify('手机号格式不正确')
        return false
      }
      this.$refs.captcha.show(res => {
        this.$store
          .dispatch('sendSmsFun', {
            url: api.sendsms_auth_mobile_nocheck,
            mobile: this.authCodeParams.mobile,
            captcha: res
          })
          .then(response => {
            if (response.code === 200) {
              this.$notify({
                type: 'success',
                message: this.$store.state.sendSmsMessage
              })
            } else {
              this.$notify(this.$store.state.sendSmsMessage)
            }
          })
      })
    },
    // 提交验证码
    testingSend () {
      http.post(api.authMobileCheck, this.authCodeParams).then(res => {
        if (res.code == 200) {
          this.$notify({ type: 'success', message: res.message })
          this.$router.push('/cityinfo/book')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.photo_uploader{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 35px 0 40px;
  .logo{
    width: 65px;
    height: 65px;
    display: block;
  }
  .uploader_text{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 110px;
    color:#959595;
    font-size: 12px;
  }
    >>>.van-uploader__upload{
    width: 65px;
    height: 65px;
    border: 1px solid #dfdfdf;
    background: #fff;
    margin: 0 auto;
  }
}

.code_box{
  .lable{
    width: 128px;
    color:#333333 ;
    font-size: 14px;
  }
  .code{
    width: 100%;
    position: relative;
    .code_text{
      color: #c9c9cc;
      font-size: 14px;
    }
    .code_img{
      width: 25px;
      height: 25px;
      display: block;
      margin-left: 1px;
    }
  }
  >>>.van-uploader__wrapper{
    width: 100%;
  }
  >>>.van-uploader__input-wrapper{
    width: 100%;
  }
}

.van-cell{
  &::after{
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 0.426667rem;
    border-bottom: 0.026667rem solid #ebedf0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
  }
  .lable2{
    width: 90px;
    color:#333333 ;
    font-size: 14px;
  }
  .text{
    width: 160px;
    border: none;
    margin-right: 20px;
    font-size: 15px;
    height: 20px;
    // margin-left: 93px;
    &::placeholder{
      color: #c9c9cc;
      font-size: 14px;
    }
  }
  .tag{
    color:#555555 ;
    font-size: 15px;
    line-height: 24px;
    position: relative;
    .van-icon{
      width: 15px;
      height: 15px;
      position: absolute;
      top: 50%;
      right: -20px;
      transform: translateY(-50%);
      color: #2790fa;
    }
  }
}
.btn{
  text-align: center;
  padding: 14px 0 ;
  .van-button{
    width: 358px;
    height: 45px;
  }
}
.notice_bar{
  width: 100%;
  padding: 14px 0 14px 35px;
  font-size: 12px;
  color: #ff6600;
  background: #fffbeb url("../../../assets/images/remind_ico.svg") 16px center no-repeat;
  background-size: 16px;
  margin-bottom: 15px;
}

.send_btn{
  margin: 0 22px;
  padding: 32px 0 0;
}
.sendCode{
  padding: 0;
  border: none;
  height: 12px;
}
.classif{
  >>>.van-cell__value{
    margin-left: 2px;
  }
}
</style>
